<template>
	<!-- 实人认证 -->
	<view class="rlrz">
		<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/rlsb_bg.png" mode="widthFix"
			class="rlrz-bg"></image>
		<view class="rlrz-main">
			<view class="from">
				<view class="row">
					<view class="left">
						<image src="/static/images/rlsb_name.png" mode="widthFix"></image>姓名
					</view>
					<view class="right">
						<input type="text" v-model="formData.userName" placeholder="请输入姓名"  />
					</view>
				</view>
				<view class="row">
					<view class="left">
						<image src="/static/images/rlsb_id.png" mode="widthFix"></image>身份证号
					</view>
					<view class="right">
						<input type="idcard" v-model="formData.idCard" placeholder="请输入身份证号" :disabled="isVerified" />
					</view>
				</view>
			</view>
			<view class="text-tip">实名认证通过后，个人名片将展示实名认证标识，增添合作可信度</view>
			<button class="public-btn" @click="handleSubmit()" :class="{ active: isBtnActive, disabled: isVerified }"
				@touchstart="isBtnActive = true" @touchend="isBtnActive = false" :disabled="isVerified">{{ isVerified ? '已实名认证' : '快速认证' }}</button>
			<!-- 协议 -->
			<view class="agreement">
				<label class="agreement-checkbox">
					<view class="custom-checkbox" :class="{ checked: agreementChecked }" @click="!isVerified && toggleAgreement()">
						<view class="checkmark" v-if="agreementChecked"></view>
					</view>
					<text @click="!isVerified && toggleAgreement()">我已认真阅读并同意</text><text class="protocol-link"
						@click="navToProtocol">《超享圈隐私政策》</text>
				</label>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					userName: this.$store.state.user.userInfo.realName,
					idCard: ''
				},
				isBtnActive: false,
				agreementChecked: false,
				isVerified: false
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onShow() {
			// 判断是否已经实人认证
			if (this.userInfo && this.userInfo.srStatus === '1') {
				this.isVerified = true;
				this.formData.userName = this.userInfo.realName || '';
				this.formData.idCard = this.userInfo.idNum || '';
				this.agreementChecked = true;
			}
		},
		methods: {
			// 提交认证
			async handleSubmit() {
				if (!this.formData.userName.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}

				// 验证姓名长度
				if (this.formData.userName.length < 2 || this.formData.userName.length > 5) {
					uni.showToast({
						title: '姓名长度必须在2-5个字之间',
						icon: 'none'
					})
					return
				}

				// 验证姓名是否包含非文字字符
				// 身份证校验
				if (!this.validateIdCard(this.formData.idCard)) {
					uni.showToast({
						title: '身份证号码格式不正确',
						icon: 'none'
					})
					return
				}

				if (!this.agreementChecked) {
					uni.showToast({
						title: '请先同意协议',
						icon: 'none'
					})
					return
				}

				try {
					// 调用后端接口获取认证参数
					const data = {
						...this.formData,
						photo: '1'
					};
					const res = await this.$api.serviceSmrz(data);
					if (res.succ) {
						// 解析返回的msg字符串
						const msgObj = JSON.parse(res.msg);
						if (msgObj.code === 200 && msgObj.data.code === '0JXX') {
							uni.showToast({
								title: '认证成功',
								icon: 'none'
							})
							setTimeout( async () => {
								const requestData = {
									...this.userInfo,
									userName: this.formData.userName, // 姓名
									idNum: this.formData.idCard, // 身份证号
									srStatus: '1', // 0:未实人 1:实人
								};
								const res = await this.$api.infoLogin(requestData);
								if (res.succ) {
									this.$store.dispatch('user/setUserInfo', res.data);
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}
							}, 2000)
						} else {
							uni.showToast({
								title: '认证失败',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: res.msg || '认证失败，请重试',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: error.message || '认证失败，请重试',
						icon: 'none'
					})
				}
			},

			// 身份证校验方法
			validateIdCard(idCard) {
				const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
				return reg.test(idCard)
			},

			// 协议勾选
			toggleAgreement() {
				this.agreementChecked = !this.agreementChecked
			},

			// 查看协议
			navToProtocol() {
				uni.navigateTo({
					url: '/pages/privacy-policy/privacy-policy'
				})
			}
		}
	}
</script>

<style lang="scss">
	.rlrz {
		height: 100%;
		display: flex;
		flex-direction: column;

		.rlrz-bg {
			width: 100%;
		}

		.rlrz-main {
			margin: 0 30rpx;
			position: relative;
			top: -20rpx;

			.from {
				.row {
					position: relative;
					display: flex;
					align-items: center;
					padding: 40rpx 0;
					font-size: 36rpx;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						bottom: 0;
						right: 0;
						height: 1px;
						background: #C9C9C9;
						transform: translateY(.5);
					}

					.left {
						display: flex;
						align-items: center;
						color: #333333;
						line-height: 50rpx;

						image {
							width: 30.35rpx;
							height: 33.38rpx;
							margin-right: 15rpx;
						}
					}

					.right {
						flex: 1;

						input {
							text-align: right;
							font-size: 36rpx;
							color: #333333;
							line-height: 50rpx;

							&::placeholder {
								color: #C9C9C9;
							}
						}
					}

					&:last-child {
						margin-top: 18rpx;

						.left {

							image {
								width: 32.35rpx;
								height: 27.73rpx;
								margin-right: 13rpx;
							}
						}
					}
				}
			}

			.text-tip {
				height: 32rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				margin: 40rpx 0 60rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.agreement {
				display: flex;
				align-items: center;
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #888;

				.agreement-checkbox {
					display: flex;
					align-self: center;
				}

				.custom-checkbox {
					position: relative;
					top: -2rpx;
					width: 34rpx;
					height: 34rpx;
					border: 2rpx solid #F3B359;
					border-radius: 50%;
					margin-right: 10rpx;
					position: relative;
					transition: all 0.3s ease;

					&.checked {
						background: linear-gradient( 180deg, #F3B359 0%, #EC6A34 100%);
						border-color: #F3B359;
					}

					.checkmark {
						position: absolute;
						left: 50%;
						top: 48%;
						transform: translate(-50%, -50%);
						width: 18rpx;
						height: 8rpx;
						border-left: 3rpx solid #fff;
						border-bottom: 3rpx solid #fff;
						transform: translate(-50%, -60%) rotate(-45deg);
					}
				}

				.protocol-link {
					color: #AC6C17;
				}
			}
		}
	}
</style>